<template>
    <div class="film-container">
        <div class="film">
            <ul>
                <li v-for="item in filmList" :key="item.id">
                    <router-link :to="'/film/filmdetail/'+item.id" class="film-content" tag="span">
                        <img v-lazy="picFix(item.img)">
                        <span class="film-info">
                            <span class="film-name"><h1>{{item.nm}}</h1><span :class="['icon',item.version=='v2d imax' ? 'active1' : '', item.version=='v3d imax' ? 'active2' : '']" ></span></span>
                            <p class="film-sc" v-if="item.sc!=0">观众评<span>{{item.sc}}</span></p>
                            <p class="film-sc" v-else><span>{{item.wish}}</span>人想看</p>
                            <p>主演:{{item.star}}</p>
                            <p>{{item.showInfo}}</p>
                        </span>
                    </router-link>
                    <mt-button :type="item.globalReleased==true ? 'danger' : 'primary'" size="small" >{{item.globalReleased==true ? "购票" : "预售"}}</mt-button>

                </li>
            </ul>
        </div>
        <div class="loading" v-show="coming.length">
            <mt-spinner color="rgb(100, 100, 100)" type="fading-circle"></mt-spinner>
        </div>
    </div>
</template>
<script>
import mui from '../../lib/js/mui.min.js'
export default {
    data(){
        return{
            filmList:[],
            filmIds:[],
            coming:[]
        }
    },
    created(){
        this.getOnFilm();
         this.$store.commit("changeTitle", "猫眼");
    },
    mounted(){
        // mui('.mui-scroll-wrapper').scroll({
        //     deceleration:0.0005
        // });
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "64.90");
            }
        },
        getOnFilm(){
            let that = this;
            this.$http.get('movieOnInfoList').then(result=>{
                console.log(result)
                if(result.status==200){
                    this.filmList = result.body.movieList;
                    this.filmIds = result.body.movieIds;
                    localStorage.setItem('firstFilm', JSON.stringify(this.filmIds[0]))
                    // console.log(filmsIds)
                    document.addEventListener(
                        "scroll",
                        this.fangdou(function() {
                            that.getAllOnFilm(this.filmIds);
                        }, 500)
                    );
                }
            })
        },
        fangdou(callback, delay) {
            // 定时器
            var timer;
            return function() {
                if (timer) {
                    // 引用外部函数的timer
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    callback.apply(this, arguments);
                }, delay);
            };
        },
        getAllOnFilm(){
            var flag = true;
            //获得滚动条距离顶部距离
            var scrollTop = document.documentElement.scrollTop;
            // 获取页面高度
            var pageHeight = document.documentElement.scrollHeight;
            // 获取视口高度
            var windowHeight = window.innerHeight;
            if (scrollTop + pageHeight == windowHeight && flag == true) {
                flag = false;
            }
            let start = 12;
            let limit = 12;
            // console.log(this.filmIds.splice(12,12))
            let filmsIds = this.filmIds.splice(12,12).join(",")
            console.log(filmsIds)
            this.$http.get('moreComingList',{
                params: {
                    token: "",
                    movieIds: filmsIds
                }
            }).then(result=>{
                if(result.status == 200){
                    console.log(result.body.coming);
                    this.coming = result.body.coming;
                    this.filmList = this.filmList.concat(result.body.coming)
                }
            });
            this.$forceUpdate();
        },
        getComingFilm(){
            this.$http.get()
        }
    }
}
</script>
<style lang="scss">
*{ touch-action: pan-y; }
.film-container{
    .nav{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid rgb(228, 228, 228);
        .mui-slider{
            width: 60%;
            color: red;
            border-color: red;
            .mui-control-item{
                font-weight: bold;
            }
            .mui-active{
                color: red;
                border-color: red;
            }
        }
        .mui-icon-search{
            color: red;
        }
    }
    .film{
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            li{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px 15px;
                img{
                    background-color: #ccc;
                }
                img[lazy="loading"] {
                    width: 64px;
                    height: 90px;
                }
                .film-content{
                    display: flex;
                    justify-content: space-between;
                    width: 285px;
                    .film-info{
                        width: 210px;
                        .film-name{
                            display: flex;
                            h1{
                                font-size: 16px;
                                width: 150px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .icon {
                                line-height: 14px;
                                display: inline-block;
                                margin-top: 5px;
                                -webkit-box-flex: 0;
                                flex: 0 0 auto;
                                border-radius: 2px;
                                margin-right: 3px;
                                color: #3c9fe6;
                                width: 43px;
                                height: 14px;
                            }
                            .active1 {
                                background: url('../../images/2d_max.png') no-repeat;
                                background-size: 43px 14px;
                            }
                            .active2 {
                                background: url('../../images/3d_max.png') no-repeat;
                                background-size: 43px 14px;
                            }
                        }
                        .film-sc{
                            span{
                                font-size: 15px;
                                font-weight: bold;
                                color: rgb(255, 115, 0);
                            }
                        }
                        p{
                            margin: 0;
                            padding: 0;
                            font-size: 13px;
                            color: rgb(22, 22, 22);
                            width: 205px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }

            }
        }
    }
    .loading{
        margin-left: 45%;
    }
}
</style>
